<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input id="t1" type="text" placeholder="请输入内容：">
<input type="button" value="点击添加" onclick="add()">
<div>列表内容如下：</div>
<ul id="list">

</ul>
</body>
<script>
    /*
    需求：点击添加按钮，将输入的内容加入列表
    1.获取输入框标签内容
    2.点击事件
    3.创建li标签，并赋值
    4.li添加到ul列表中
     */
    function add() {
        //1.获取输入框标签内容
        var t1 = document.getElementById('t1');
        //    3.创建li标签，并赋值
        var li = document.createElement('li');
        if (t1.value != '') {//输入框为空，不能添加
            li.innerText = t1.value;
            /*
            1.innerText是标签内的文本,输入输出的是字符串;
            2.innerHtml是<标签内的文本,输入输出到该DOM内部纯HTML代码;
            3.value是表单元素特有的属性,输入输出的是字符串;
             */
            //li添加到ul列表中
            var ul = document.getElementById('list');
            ul.appendChild(li);
            //每次添加完，输入框清空
            t1.value = '';
        } else {
            alert("不能为空！！");

        }


    }
</script>
</html>